<template>
	<div class="packed-div">
		<!--头部导航-->
		<div class='header-div white_bg padding10'>
			<div class='flex flex-left'>
				<span class='packed' :class="{'active': printType==1}"
					@click='clickSort(1)'>已打包裹</span>
				<span class='packed' :class="{'active': printType==2}"
					@click='clickSort(2)'>打印记录</span>
			</div>
			<div class="flex flex-right">
				<span class='iconfont icon-sousuo' @click='navigatePackagelist'></span>
			</div>
		</div>
		<!--头部筛选-->
		<div class="filter white_bg padding10">
			<span>共{{recordNum}}条记录</span>
			<div class='flex flex-right' @click='showDrawer'>
				<span>筛选</span>
				<span class='iconfont icon-xiala'></span>
			</div>
		</div>
		
		<!--无打印记录-->
		<div class='norecord' v-if='recordList.length==0'>
			<span class='iconfont icon-baoguo'></span>
			<p>无打印记录</p>
		</div>
		
		<!--有打印记录-->
		<div class='records-div' v-if='recordList.length>0'>
			
		</div>
		
		<!--抽屉-->
		<uni-drawer :visible="false" mode='right' ref='myDrawer'>
			<view style="padding:30upx;">
				<view class="chosen_limit">
					<ul>
						<li>
							<span class='timetip'>开始时间：</span>
							<picker 
							    :value="startTime.value" mode='date'
								:end="startTime.end"
							     @change='toChangeDate'
							    data-type='1'>
							    <span class="picker">
									{{startTime.value||'请选择'}}
									<span class='iconfont icon-you'></span>
								</span>
							</picker>
						</li>
						<li>
							<span class='timetip'>结束时间：</span>
							<picker 
							    :value="endTime.value" mode='date'
								:start="endTime.start"
							    :end="endTime.end" @change='toChangeDate'
							    data-type='2'>
							    <span class="picker">
									{{endTime.value||'请选择'}}
									<span class='iconfont icon-you'></span>	
								</span>
							</picker>
						</li>
					</ul>
				</view>
			</view>
		</uni-drawer>
		
	</div>
</template>

<script>
import uniDrawer from "../../components/uni-drawer.vue"
import {numberDouble,post,showToast} from '../../utils/index.js';
export default {
	data() {
		return {
			recordNum: 0,  //记录条数
			recordList: [],  //打印记录
			startTime: {
			    value: '',  //初始值
			    end: ''  //最大值
			},
			endTime: {
			    value: '',  //默认值
			    start: '',   //开始值
			    end: ''  //最大值
			},
			printType: 1,  //已打包裹：1|打印记录：2
			currentPage: 1,  //当前页码
			nomore: false,  //没有更多
		};
	},
	mounted(){
		this.initTime();
	},
	components: {
		uniDrawer
	},
	methods: {
		//初始化时间
		initTime(){
			var nowTime = new Date();
			var theYear = nowTime.getFullYear();
			var theMonth = numberDouble(nowTime.getMonth()+1);
			var theDay = numberDouble(nowTime.getDate());
			this.startTime = {
				//value: (theYear-1)+'-'+theMonth+'-'+theDay,
				end: theYear+'-'+theMonth+'-'+theDay
			};
			this.endTime = {
				//value: theYear+'-'+theMonth+'-'+theDay,
				start: (theYear-1)+'-'+theMonth+'-'+theDay,
				end: theYear+'-'+theMonth+'-'+theDay
			};
		},
		//初始化数据
		initData(){
			this.clearFilter();
			this.hideDrawer();
			this.recordNum = 0;
			this.recordList = [];
			this.currentPage = 1;
			this.nomore = false;
		},
		//清除筛选条件
		clearFilter(){
			this.startTime.value = '';
			this.endTime.value = '';
		},
		//改变日期
		toChangeDate(e){
		    var type = e.target.dataset.type;
		    var value = e.target.value;  //选择的时间值
		    if(type==1){  //开始时间
		        this.startTime.value = value;
		        this.endTime.start = value;
		    }else{   //点击的结束时间
		        this.endTime.value = value;
		        this.startTime.end = value;
		    }
		},
		//显示筛选抽屉
		showDrawer(){
			this.$refs.myDrawer.show();
		},
		//隐藏筛选抽屉
		hideDrawer(){
			this.$refs.myDrawer.close();
		},
		//点击大类
		clickSort(type){
			this.printType = type;
		},
		//获取包裹列表
		getRecordList(){
			var self = this;
			if(this.nomore){  //不能加载更多
				showToast('没有更多');
			    return;
			}
			/* post(queryGoodsByTypeUrl, {
			    mall_token: self.globalData.mall_token,
			    session_token: self.userInfo.session_token,
			    type: type? type: '',
			    page: self.currentPage,
			})
			.then((res)=>{
			    //console.log(res);
			    var pages = res.countPage;
			    var listData = res.data;
			    if(listData.length==0){
			        self.orderSpaceShow = true;
			    }else{
			        self.orderSpaceShow = false;
			        self.goodsList = [...self.goodsList, ...listData];
			        self.firstInit = false;
			        self.currentPage++;
			        if(self.currentPage > pages){
			            self.nomore = true;
			            if(pages>1){
			                self.firstInit = false;
			            }else{
			                self.firstInit = true;
			            }
			        }
			        self.$forceUpdate();
			    }
			}); */
		},
		//跳转到已打包裹的搜索页面
		navigatePackagelist(){
			var self = this;
			//this.printType 1:已打包裹 2:打印记录
			uni.navigateTo({
				url: '/pages/packagelist/index?type='+self.printType
			});
		}
	},
	onPullDownRefresh() {
		uni.stopPullDownRefresh();
		uni.hideNavigationBarLoading();
		this.initData();
		this.getRecordList();
	},
	onReachBottom() {
		this.getRecordList();
	}
}
</script>

<style lang="less">
@import '../../style/default.less';
/*头部导航信息*/
.header-div{
	display: flex;
	height: 70upx;
	align-items: center;
	justify-content: space-between;
	.flex{
		height: 100%;
		display: flex;
		align-items: center;
	}
	.flex-left{
		.packed{
			display: inline-block;
			height: 100%;
			line-height: 70upx;
			padding: 0 20upx;
			box-sizing: border-box;
		}
		.packed.active{
			color: @mainColor;
			border-bottom: 1px solid @mainColor;
		}
	}
	.flex-right{
		justify-content: flex-end;
		span.iconfont{
			font-size: 50upx;
		}
	}
}
/*头部筛选*/
.filter{
	height: 60upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #eee;
	.flex-right{
		display: flex;
		align-items: center;
		span.icon-xiala{
			font-size: 40upx;
		}
	}
}
/*无打印记录*/
.norecord{
	text-align: center;
	margin-top: 20%;
	.iconfont{
		font-size: 200upx;
		color: #999;
	}
	p{
		color: #999;
		font-size: 28upx;
	}
}
/**抽屉**/
.chosen_limit{
	font-size:24upx;
	ul{
		li{
			min-height: 70upx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #eee;
			span.timetip{
				min-width: 140upx;
			}
			picker{
				flex:1;
				text-align: right;
			}
		}
	}
}
</style>
